<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8"> 
            <title>Bootstrap Example</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
            <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
            <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>Button</h2>
            <p>.btn类是按钮的基本样式</p>
            <button type="button" class="btn">基本按钮</button>
            <button type="button" class="btn btn-default">默认</button>
            <button type="button" class="btn btn-primary">原始按钮</button>
            <button type="button" class="btn btn-success">成功</button>
            <button type="button" class="btn btn-info btn-sm">点击按钮弹出信息</button>
            <button type="button" class="btn btn-warning">谨慎操作warning</button>
            <button type="button" class="btn btn-danger">危险</button>
            <button type="button" class="btn btn-link">链接</button>
            <button type="button" class="btn btn-lg">大按钮</button>
            <button type="button" class="btn btn-sm">小按钮</button>
            <button type="button" class="btn btn-xs">超小按钮</button>
            <button type="button" class="btn btn-xs">超小按钮</button><br><br>
            <p>.active类表示按钮被点击</p>   
            <button type="button" class="btn btn-default">默认按钮</button>
            <button type="button" class="btn btn-default active">点击激活的默认按钮</button>
            <br>
            <button type="button" class="btn btn-info">信息按钮 </button>
            <button type="button" class="btn btn-info active">点击激活的信息按钮</button><br><br>
            <p> disabled 属性可制作一个禁用的按钮：</p>   <br>
            <button type="button" class="btn btn-default" disabled="disabled">禁用的默认按钮</button><br>
            <a href="#" class="btn btn-info disabled" role="button">禁用的信息链接</a><br>
            <br><br>
            <p>您可以在 a、button 或 input 元素上使用按钮 class。
                但是建议您在 button 元素上使用按钮 class，避免跨浏览器的不一致性问题。</p><br>
                    <a href="http://www.baidu.com" class="btn btn-default" role="button" >链接</a>
                    <button class="btn btn-default" type="submit">按钮</button>
                    <input type="button" class="btn btn-default" value="输入">
                    <input type="button" class="btn btn-default" value="提交">
            <br/><br/>
            <button type="button" class="btn btn-block">拉伸</button><br>
            <br><br>
        </div>

    </body>
</html>